<template>
    <div class="login_body">
        <div class="bg" />
        <div class="box">
            <div class="title">注册账号</div>
            <el-form ref="form" :model="form" :rules="rules">

                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>

                <el-form-item label="性别" prop="gender">
                    <template>
                        <el-radio v-model="form.gender" label="Male">男</el-radio>
                        <el-radio v-model="form.gender" label="Female">女</el-radio>
                    </template>
                </el-form-item>

                <el-form-item label="年龄" prop="age">
                    <el-input v-model="form.age" />
                </el-form-item>

                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="login_btn" @click="login()">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script>
import { registerAPI } from '@/api/user'
export default {
    data() {
        return {
            flag: false,
            form: {
                name: '',
                gender: '',
                age: '',
                username: '',
                password: '',
            },
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 6, max: 16, message: '账号应该6-16位', trigger: 'blur' }

                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '密码应该6-16位', trigger: 'blur' }
                ],

                name: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '不能为空', trigger: 'blur' }

                ],
                age: [
                    { required: true, message: '不能为空', trigger: 'blur' }

                ]

            }
        }
    },
    mounted() {

    },
    methods: {
        login() {
            // this.$refs.名字 => 拿到组件 => 调用组件的方法validate
            this.$refs.form.validate((ok) => {
                if(ok){
                    registerAPI(this.form).then((res) => {
                        console.log(res);
                        if(res.code === 0){
                            this.$message.error("账号已经存在！")
                        }else{
                            this.$router.push("/login")
                            this.$message.success("注册成功!")
                        }
                    }

                    )
                }   
                
            })
        }
    }
}
</script>
  
<style scoped lang="scss">
.login_body {
    display: flex;
}

.bg {
    width: 60vw;
    height: 100vh;
    background: url("~@/assets/login.jpg") no-repeat;
    background-position: right top;
    background-size: cover;
}

.box {
    margin: 200px 10% 0;
    flex: 1;

    .title {
        padding-bottom: 76px;
        font-size: 26px;
        font-weight: 500;
        color: #1e2023;
    }

    ::v-deep() {
        .ant-form-item {
            display: flex;
            margin-bottom: 62px;
            flex-direction: column;
        }

        .ant-form-item-label label {
            font-size: 16px;
            color: #8b929d;
        }

        .ant-input,
        .ant-input-password {
            border-radius: 8px;
        }
    }
}

.login_btn {
    width: 100%;
}
</style>
  